<template>
  <view class="" :style="colorStyle">
    <block v-if="!loadingPage">
      <!-- #ifdef MP-WEIXIN -->
      <view class="" style="height: 100rpx"> </view>
      <!-- #endif -->
      <x-skeleton type="banner" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton type="info" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton type="list" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton type="waterfall" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
    </block>
    <view v-else>
      <navTitle :noheight="false" />
      <view class="infobox1">
        <swiper
          :current="current"
          :indicator-dots="false"
          :autoplay="true"
          :interval="5000"
          :duration="500"
          indicator-color="#505050"
          indicator-active-color="#fff"
          :circular="true"
          @change="bannerChange"
        >
          <swiper-item v-for="(item, index, key) in info.imgList" :key="key">
            <image :src="item" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
        <view class="indicator-dots flex aitems jcenter">
          <view
            :class="current == index ? 'active dots' : 'dots'"
            v-for="(item, index, key) in info.imgList"
            :key="key"
          >
          </view>
        </view>
      </view>
      <!-- 秒杀 -->
      <view class="infobox2" v-if="info.publicityType == 'limitTimeSecKill'">
        <image
          src="http://xpj40szpt.signalpha.cn/img/img74.png"
          mode=""
          class="bg"
        ></image>
        <view class="infobox2main flex aitems between">
          <view class="block1 flex aitems">
            <view class="info1 flex aitems cfff">
              <view class="tip1 f32"> ￥ </view>
              <view class="tip2 f56">
                {{ info.publicityInfo.config.detailList[0].price.toFixed(2) }}
              </view>
            </view>
            <view class="info2 cfff flex aitems">
              <view class="tip1 f22"> ￥ </view>
              <view class="tip2 f32"> {{ info.goodsPrice.toFixed(2) }} </view>
            </view>
          </view>
          <view class="block2">
            <view class="info1 cfff f24 fontWeight">
              限时秒杀 {{ info.publicityInfo.statusText }}
            </view>
            <view class="info2 flex aitems">
              <u-count-down
                :time="downTime"
                format="HH:mm:ss"
                autoStart
                millisecond
                @change="downonChange"
                @finish="downfinish"
              >
                <view class="flex aitems">
                  <view class="tip1">
                    <text class="">{{
                      timeData.hours > 10
                        ? timeData.hours
                        : "0" + timeData.hours
                    }}</text>
                  </view>
                  <text class="tip2">:</text>
                  <view class="tip1">
                    <text class="">{{
                      timeData.minutes > 10
                        ? timeData.minutes
                        : "0" + timeData.minutes
                    }}</text>
                  </view>
                  <text class="tip2">:</text>
                  <view class="tip1">
                    <text class="">{{
                      timeData.seconds > 10
                        ? timeData.seconds
                        : "0" + timeData.seconds
                    }}</text>
                  </view>
                </view>
              </u-count-down>
            </view>
          </view>
        </view>
      </view>
      <!-- 秒杀 -->
      <!-- N元N件 -->
      <view
        class="infobox2"
        v-if="
          info.publicityType == 'limitTimeDiscount' ||
          info.publicityType == 'fullSubFullDiscount' ||
          info.publicityType == 'nMoneyNPiece'
        "
      >
        <image
          src="http://xpj40szpt.signalpha.cn/img/img74.png"
          mode=""
          class="bg"
        ></image>
        <view class="infobox2main flex aitems between">
          <view class="block1 flex">
            <view
              class="info1 cfff"
              v-if="info.publicityType == 'limitTimeDiscount'"
            >
              <view class="tipbox1 flex aitems">
                <view class="tip1 f32"> ￥ </view>
                <view
                  class="tip2 f56"
                  v-if="info.publicityInfo.config.type == 3"
                >
                  {{
                    Number(
                      info.publicityInfo.config.detailList[0].price
                    ).toFixed(2)
                  }}
                </view>
                <view
                  class="tip2 f56"
                  v-if="info.publicityInfo.config.type == 2"
                >
                  {{
                    Number(
                      info.publicityInfo.config.detailList[0].goodsPrice -
                        info.publicityInfo.config.detailList[0].price
                    ).toFixed(2)
                  }}
                </view>
                <view
                  class="tip2 f56"
                  v-if="info.publicityInfo.config.type == 1"
                >
                  {{
                    Number(
                      (info.publicityInfo.config.detailList[0].goodsPrice *
                        info.publicityInfo.config.detailList[0].price) /
                        10
                    ).toFixed(2)
                  }}
                </view>
              </view>
              <view class="tipbox2 f28">
                ￥{{ info.goodsPrice.toFixed(2) }}
              </view>
            </view>
            <view
              class="info1 cfff"
              v-if="
                info.publicityType == 'fullSubFullDiscount' ||
                info.publicityType == 'nMoneyNPiece'
              "
            >
              <view class="tipbox1 flex aitems">
                <view class="tip1 f32"> ￥ </view>
                <view class="tip2 f56">
                  {{ Number(info.goodsPrice).toFixed(2) }}
                </view>
              </view>
              <view class="tipbox2 f28">
                ￥{{ info.marketPrice.toFixed(2) }}
              </view>
            </view>
            <!-- <view class="info3 cDD5C5C fontWeight"> 3件单价￥96 </view> -->
            <view class="info3 cDD5C5C fontWeight">
              {{ info.publicityInfo.publicityTitle }}
            </view>
          </view>
          <view class="block2">
            <view class="info1 cfff f24 fontWeight">
              <text v-if="info.publicityType == 'limitTimeDiscount'"
                ><text>限时折扣</text> {{ info.publicityInfo.statusText }}</text
              >
              <text v-if="info.publicityType == 'fullSubFullDiscount'"
                ><text>满减活动</text> {{ info.publicityInfo.statusText }}</text
              >
              <text v-if="info.publicityType == 'nMoneyNPiece'"
                ><text>N元N件</text> {{ info.publicityInfo.statusText }}</text
              >
              <!-- 限时折扣 -->
              <!-- 满减活动 -->
            </view>
            <view class="info2 flex aitems">
              <u-count-down
                :time="downTime"
                format="HH:mm:ss"
                autoStart
                millisecond
                @change="downonChange"
                @finish="downfinish"
              >
                <view class="flex aitems">
                  <view class="tip1">
                    <text class="">{{
                      timeData.hours > 10
                        ? timeData.hours
                        : "0" + timeData.hours
                    }}</text>
                  </view>
                  <text class="tip2">:</text>
                  <view class="tip1">
                    <text class="">{{
                      timeData.minutes > 10
                        ? timeData.minutes
                        : "0" + timeData.minutes
                    }}</text>
                  </view>
                  <text class="tip2">:</text>
                  <view class="tip1">
                    <text class="">{{
                      timeData.seconds > 10
                        ? timeData.seconds
                        : "0" + timeData.seconds
                    }}</text>
                  </view>
                </view>
              </u-count-down>
            </view>
          </view>
        </view>
      </view>
      <!-- N元N件 -->
      <view class="infobox3">
        <view
          class="block4 flex between"
          v-if="info.publicityType == 'ordinary'"
        >
          <view class="info1 flex aitems themeColor fontWeight">
            <view class="flex aitems">
              <view class="tip1 f32"> ￥ </view>
              <view class="tip2 f56"> {{ info.goodsPrice.toFixed(2) }} </view>
            </view>
            <view
              class="flex aitems f28 c858585"
              style="text-decoration: line-through; margin-left: 30rpx"
            >
              <view class="tip1" style="top: 0"> ￥ </view>
              <view class="tip2"> {{ info.marketPrice.toFixed(2) }} </view>
            </view>
          </view>
          <view class="info2 flex aitems">
            <view @click="favoriteSave">
              <u-icon
                v-if="info.favoriteId > 0"
                name="star-fill"
                size="25"
                color="var(--view-theme)"
              ></u-icon>
              <u-icon
                v-if="info.favoriteId <= 0"
                name="star"
                size="25"
                color="#858585"
              ></u-icon>
            </view>
            <image
              src="@/static/img75.png"
              mode=""
              @click="qrCodeShowChange"
            ></image>
          </view>
        </view>
        <view
          class="block1 flex aitems between"
          @click="gourl(`/pages/coupon/coupon`)"
        >
          <view class="left">
            <view
              class="label f24 fontWeight"
              v-for="(item, index, key) in info.couponList"
              :key="key"
              v-if="index < 2"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="right flex aitems c858585 f24">
            领券
            <image src="@/static/img18.png" mode=""></image>
          </view>
        </view>
        <view
          class="block2 flex between"
          v-if="info.publicityType !== 'ordinary'"
        >
          <view class="info1 c1F1F1F f36 fontWeight">
            {{ info.name }}
          </view>
          <view class="info2 flex aitems">
            <view class="" @click="favoriteSave">
              <u-icon
                v-if="info.favoriteId > 0"
                name="star-fill"
                size="25"
                color="var(--view-theme)"
              ></u-icon>
              <u-icon
                v-if="info.favoriteId <= 0"
                name="star"
                size="25"
                color="#858585"
              ></u-icon>
            </view>
            <image src="@/static/img75.png" @click="qrCodeShowChange" mode="">
            </image>
          </view>
        </view>
        <view
          class="block2 flex between"
          v-if="info.publicityType == 'ordinary'"
        >
          <view class="info1 c1F1F1F f36 fontWeight" style="width: 100%">
            {{ info.name }}
          </view>
        </view>
        <view class="block3 c858585 f24 flex">
          <view>
            销量：{{
              Number(info.salesVolume + info.salesVolumeVirtual).toFixed(0)
            }}
          </view>
          <!-- <view style="margin: 0 0 0 30rpx">
            库存：{{ Number(info.stock).toFixed(0) }}
          </view> -->
        </view>
      </view>
      <view class="infobox4">
        <view
          class="block1 flex aitems"
          v-if="info.publicityGoodsList.length !== 0"
        >
          <view class="info1 c858585 f24"> 促销 </view>
          <view
            class="info2 c1F1F1F f24"
            style="
              white-space: nowrap;
              overflow-y: scroll;
              width: calc(100% - 100rpx);
            "
          >
            <view
              class="tipbox1 flex aitems cfff"
              :style="{
                background: `var(--view-theme)`,
                padding: '4rpx 10rpx',
                borderRadius: '4rpx',
                display: 'inline-block',
              }"
              v-for="(item, index, key) in info.publicityGoodsList"
              :key="key"
              @click="goActivities(item)"
            >
              <!-- <image src="@/static/img77.png" mode=""></image> -->
              <view class="tip1" style="margin: 0">
                {{ item.publicityTitle }}
              </view>
            </view>
          </view>
        </view>
        <view class="block1 flex aitems">
          <view class="info1 c858585 f24"> 配送 </view>
          <view class="info2 flex aitems c1F1F1F f24">
            <view class="tipbox1 flex aitems" v-if="seller.isOpenPick">
              <image src="@/static/img77.png" mode=""></image>
              <view class="tip1"> 到店自提 </view>
            </view>
            <view class="tipbox1 flex aitems">
              <image src="@/static/img78.png" mode=""></image>
              <view class="tip1"> 快递到家 </view>
            </view>
          </view>
        </view>
        <view
          class="block2 flex aitems between"
          @click="goodsShow = true"
          v-if="info.serveList.length !== 0"
        >
          <view class="left flex aitems">
            <view class="info1 c858585 f24"> 服务 </view>
            <view class="info2 flex aitems c1F1F1F f24">
              <text v-for="(item, index, key) in info.serveList" :key="key"
                >{{ item.name }} ·
              </text>
              <!-- 退货运费险掂 · 7天无理由 · 极速退款 -->
            </view>
          </view>
          <image src="@/static/img18.png" class="right" mode=""></image>
        </view>
        <view
          class="block2 flex aitems between"
          @click="payChange('buy')"
          v-if="info.goodsSkuList.length > 0"
        >
          <view class="left flex aitems">
            <view class="info1 c858585 f24"> 规格 </view>
            <view class="info2 flex aitems c1F1F1F f24">
              {{
                info.skuInfo.spec
                  .replace(/{/g, "")
                  .replace(/}/, "")
                  .replace(/"/g, "")
              }}
              <!-- 退货运费险掂 · 7天无理由 · 极速退款 -->
            </view>
          </view>
          <image src="@/static/img18.png" class="right" mode=""></image>
        </view>
      </view>
      <view class="infobox5">
        <view
          class="block1 flex aitems between"
          @click="gourl(`/pages/goods/evaluation?id=${info.id}`)"
        >
          <view class="info1 c1F1F1F f32 fontWeight">
            用户评价（{{ commentNum }}）
          </view>
          <view class="info2 flex aitems c858585 f24">
            <view class="tip1"> </view>
            <image src="@/static/img18.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="infobox6">
        <view class="block1 flex aitems between">
          <view class="left flex aitems">
            <image :src="seller.logo" mode="aspectFill"></image>
            <view class="info1">
              <view class="tip1 c1F1F1F f32 fontWeight">
                {{ seller.name }}
              </view>
              <view class="tip2 flex aitems">
                <image
                  src="@/static/img7.png"
                  v-for="(item, index, key) in seller.score"
                  :key="key"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
          <view
            class="right cfff f28"
            @click.stop="gourl(`/pages/seller/info?id=${seller.id}`)"
          >
            进店
          </view>
        </view>
        <view class="block2 flex aitems">
          <image
            :src="item.img"
            v-for="(item, index, key) in seller.goodsList"
            :key="key"
            mode="aspectFill"
            @click="goDetail(item)"
            :style="{
              margin: `${
                seller.goodsList.length - 1 == index ? 0 : '0 20rpx 0 0'
              }`,
            }"
          ></image>
        </view>
      </view>
      <view class="infobox7">
        <view class="block1 c1F1F1F f32 fontWeight"> 商品详情 </view>
        <view class="block2">
          <u-parse :content="info.detail"></u-parse>
        </view>
      </view>

      <view class="" style="height: 200rpx"> </view>

      <view class="infobox8 flex aitems between">
        <view class="block1 flex aitems c1F1F1F f22">
          <view class="info1" @click="goswitchTab('/pages/index/index')">
            <image src="@/static/img79.png" mode=""></image>
            首页
          </view>
          <!-- <view class="info1" @click="handleKefu"> -->
          <view class="info1" style="position: relative">
            <button class="avatar-wrapper" open-type="contact"></button>
            <image src="@/static/img80.png" mode=""></image>
            客服
          </view>
          <view class="info1" @click="goswitchTab('/pages/car/car')">
            <image src="@/static/img81.png" mode=""></image>
            购物车
          </view>
        </view>
        <view class="block2 flex aitems sa">
          <view class="info1 f28 fontWeight" @click="payChange('addCar')">
            加入购物车
          </view>
          <view class="info2" @click="payChange('buy')"> 立即购买 </view>
        </view>
      </view>

      <u-popup
        mode="bottom"
        :safeAreaInsetBottom="false"
        :show="goodsShow"
        :overlayStyle="{ 'touch-action': 'none' }"
        bgColor="transparent"
        @close="goodsShow = false"
      >
        <view class="popbox1">
          <image
            src="@/static/img56.png"
            class="close"
            mode=""
            @click="goodsShow = false"
          ></image>
          <view class="block1 c1F1F1F f36 fontWeight"> 服务保障 </view>
          <view
            class="block3"
            v-for="(item, index, key) in info.serveList"
            :key="key"
          >
            <view class="info1 c1F1F1F f32 fontWeight"> {{ item.name }} </view>
            <view class="info2 c525252 f28">
              {{ item.detail }}
            </view>
          </view>
          <view class="btn f32 cfff" @click="goodsShow = false">
            我知道了
          </view>
          <view class="" style="height: 100rpx"> </view>
        </view>
      </u-popup>

      <u-popup
        mode="bottom"
        :safeAreaInsetBottom="false"
        :show="skuShow"
        :overlayStyle="{ 'touch-action': 'none' }"
        bgColor="transparent"
        @close="skuShow = false"
      >
        <view class="skuPopbox1">
          <image
            src="@/static/img56.png"
            class="close"
            @click="skuShow = false"
            mode=""
          ></image>

          <view class="skuinfobox1 flex aitems">
            <image
              :src="info.skuInfo.img ? info.skuInfo.img : info.img"
              class="img"
              mode="aspectFill"
            ></image>
            <view class="block1 flex column between">
              <view class="info1 ellipsis1">
                {{ info.name }}
              </view>
              <view class="info2 flex aitems themeColor">
                <view class="tip1 f28"> ￥ </view>
                <view
                  class="tip2 f40"
                  v-if="info.publicityType == 'limitTimeSecKill'"
                >
                  {{ info.skuInfo.price }}
                </view>
                <view
                  class="tip2 f40"
                  v-else-if="info.publicityType == 'limitTimeDiscount'"
                >
                  <text v-if="info.publicityInfo.config.type == 3">{{
                    Number(info.skuInfo.price).toFixed(2)
                  }}</text>
                  <text v-if="info.publicityInfo.config.type == 2">{{
                    Number(
                      info.skuInfo.goodsPrice - info.skuInfo.price
                    ).toFixed(2)
                  }}</text>
                  <text v-if="info.publicityInfo.config.type == 1">{{
                    Number(
                      (info.skuInfo.goodsPrice * info.skuInfo.price) / 10
                    ).toFixed(2)
                  }}</text>
                </view>
                <view class="tip2 f40" v-else>
                  {{ info.skuInfo.goodsPrice }}
                </view>
              </view>
              <!-- <view class="info3">库存：{{ info.skuInfo.stock }}</view> -->
            </view>
          </view>

          <block v-if="info.goodsSkuList.length > 0">
            <view
              class="skuinfobox2"
              v-for="(item, index, key) in info.goodsSpecKeyList"
              :key="key"
            >
              <view class="block1 c1F1F1F f24"> {{ item.specKey }} </view>
              <view class="block2 flex aitems wrap">
                <view
                  :class="
                    items.check
                      ? 'info1 c1F1F1F f28 info2'
                      : 'info1 c1F1F1F f28'
                  "
                  v-for="(items, indexs, keys) in item.goodsSpecList"
                  :key="keys"
                  @click="tabskuChange(index, indexs)"
                >
                  {{ items.specValue }}
                </view>
              </view>
            </view>
          </block>

          <view class="skuinfobox3">
            <view class="block1 c1F1F1F f24"> 购买数量 </view>
            <view class="block2 flex aitems">
              <view class="info1" @click="minus">
                <u-icon
                  name="minus-circle-fill"
                  size="30"
                  color="var(--view-theme)"
                ></u-icon>
              </view>
              <input
                type="number"
                v-model="goodsNum"
                class="c1F1F1F f28"
                maxlength="5"
                @blur="inputBlur"
              />
              <view class="info1" @click="plus">
                <u-icon
                  name="plus-circle-fill"
                  size="30"
                  color="var(--view-theme)"
                ></u-icon>
              </view>
            </view>
          </view>

          <view class="btn f32 cfff" @click="confirmChange"> 确认 </view>
          <view class="" style="height: 100rpx"> </view>
        </view>
      </u-popup>
    </view>

    <u-popup
      mode="center"
      :safeAreaInsetBottom="false"
      :show="qrCodeShow"
      :overlayStyle="{ 'touch-action': 'none' }"
      :customStyle="{ width: '100%' }"
      bgColor="transparent"
    >
      <view style="position: relative">
        <image
          v-if="poster"
          :src="poster"
          mode="widthFix"
          class="poster"
        ></image>
        <image
          src="@/static/img41.png"
          mode=""
          class="closeIcon"
          @click.stop="qrCodeShow = false"
        />
      </view>

      <view style="height: 130rpx"> </view>
      <view class="qrCodeinfobox3">
        <view class="block1" @click.stop="saveImg"> 保存图片 </view>
      </view>
    </u-popup>

    <canvas
      v-if="!poster"
      :style="{ height: `${canvasHeight}px` }"
      canvas-id="canvas"
      disable-scroll="true"
      class="canvasBox"
    ></canvas>
  </view>
</template>

<script>
import {
  goodsInfo,
  sellerInfo,
  favoriteSave,
  favoriteRemove,
  cartSave,
  userinfo,
  updateParent,
  goodsCommentPage,
  codeGetScene,
  codeSetScene,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import {
  getGloBalData,
  getStorage,
  getToken,
  setStorage,
} from "../../utils/storage";
import { back, go, loading, msg, showModal } from "../../utils/wxAPI";
import baseUrl from "@/servers/baseUrl";
import { getEnv } from "../../utils/env";
import { handleLoopCallBack } from "@/utils/util";
import qrCodeCom from "./qrCode.vue";
const md5 = require("@/utils/md5");
export default {
  mixins: [colors],
  components: { qrCodeCom },
  data() {
    return {
      qrCodeShow: false,
      loadingPage: false,
      goodsShow: false,
      skuShow: false,
      current: 0,
      banner: [],
      options: {},
      info: {},
      seller: {},
      buyType: "buy", //buy,addCar
      goodsNum: 1,
      timeData: {},
      downTime: 99999999,
      user: {},
      commentNum: 0,
      /**海报**/
      canvasHeight: 0,
      poster: "",
      qrcode: "",
      imgHeight: 0,
      width: uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowHeight,
      localImg: "",
      qrCodeTimer: null,
    };
  },
  async onLoad(options) {
    this.options = options;
    console.log(options);

    if (getToken()) {
      if (this.options.scene) {
        await this.codeGetScene();
      }
      await this.goodsInfo();
      await this.userinfo();
      uni.hideLoading();
      // this.downloadFileQrCode().then(() => {
      //   // this.downloadFileBgImg();
      // });
      if (this.info.sellerId > 0) {
        await this.sellerInfo();
      }
      if (this.options.state > 1 || this.options.uid) {
        updateParent({
          id: this.options.uid ? this.options.uid : this.options.state,
        });
      }
      if (getEnv() == "WX_PUBLIC") {
        this.$jwx.updateTimelineShareData({
          title: this.info.name,
          link: `${location.origin}/pages/goods/detail?id=${this.info.id}&uid=${
            getStorage("userinfo").id
          }`,
          imgUrl: this.info.img,
          callback: function (res) {},
        });

        this.$jwx.updateAppMessageShareData({
          title: this.info.name,
          desc: this.info.brief,
          link: `${location.origin}/pages/goods/detail?id=${this.info.id}&uid=${
            getStorage("userinfo").id
          }`,
          imgUrl: this.info.img,
          callback: function (res) {},
        });
      }
    } else {
      handleLoopCallBack(async () => {
        if (this.options.scene) {
          await this.codeGetScene();
        }
        await this.goodsInfo();
        await this.userinfo();
        uni.hideLoading();
        // this.downloadFileQrCode().then(() => {
        //   // this.downloadFileBgImg();
        // });
        if (this.info.sellerId > 0) {
          await this.sellerInfo();
        }
        if (this.options.state > 1 || this.options.uid) {
          updateParent({
            id: this.options.uid ? this.options.uid : this.options.state,
          });
        }
        if (getEnv() == "WX_PUBLIC") {
          this.$jwx.updateTimelineShareData({
            title: this.info.name,
            link: `${location.origin}/pages/goods/detail?id=${this.info.id}&uid=${this.user.id}`,
            imgUrl: this.info.img,
            callback: function (res) {},
          });

          this.$jwx.updateAppMessageShareData({
            title: this.info.name,
            desc: this.info.brief,
            link: `${location.origin}/pages/goods/detail?id=${this.info.id}&uid=${this.user.id}`,
            imgUrl: this.info.img,
            callback: function (res) {},
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  async onShow() {
    if (getToken()) {
      this.goodsCommentPage();
    }
  },
  methods: {
    async codeGetScene() {
      loading();
      let { data } = await codeGetScene({
        key: this.options.scene,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        console.log(data.data);
        let ids = data.data.split(",");
        this.options.id = ids[0];
        this.options.uid = ids[1];
      }
      uni.hideLoading();
    },
    async goodsCommentPage() {
      let { data } = await goodsCommentPage({
        current: 1,
        size: 10,
        goodsId: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.commentNum = data.data.total;
      }
    },
    async userinfo() {
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.user = info;
      }
    },
    async goodsInfo() {
      loading();
      let { data } = await goodsInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.filterData(info);
        this.info = info;
        console.log(this.info);
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      } else {
        back();
      }
      uni.stopPullDownRefresh();
    },
    filterData(info) {
      info.imgList = info.imgList.split(",");
      if (info.publicityGoodsList.length == 0) {
        info.publicityType = "ordinary";
      } else {
        let publicityType = [];
        let publicityGoodsList = [];
        for (let i = 0; i < info.publicityGoodsList.length; i++) {
          let item = info.publicityGoodsList[i];
          if (item.publicityType == "limitTimeSecKill") {
            item.config = item.config ? JSON.parse(item.config) : {};

            let now = Date.now();
            let beginTime = new Date(
              item.beginTime.replace(/-/g, "/")
            ).getTime();
            let endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();

            if (now < beginTime) {
              item.statusText = "即将开始";
              this.downTime = beginTime - now;
            } else if (endTime - now > 0) {
              item.statusText = "抢购中";
              this.downTime = endTime - now;
            } else {
              item.statusText = "已结束";
              showModal({
                t2: "活动已结束",
                btn1show: false,
              }).then(() => {
                back();
              });
            }
          }
          if (item.publicityType == "limitTimeDiscount") {
            item.config = item.config ? JSON.parse(item.config) : {};

            item.config.detailList.map((items) => {
              info.goodsSkuList.map((itemss) => {
                if (items.spec == itemss.spec) {
                  items.goodsPrice = itemss.goodsPrice;
                }
              });
              console.log(items);
            });

            let now = Date.now();
            let beginTime = new Date(
              item.beginTime.replace(/-/g, "/")
            ).getTime();
            let endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();

            if (now < beginTime) {
              item.statusText = "即将开始";
              this.downTime = beginTime - now;
            } else if (endTime - now > 0) {
              item.statusText = "进行中";
              this.downTime = endTime - now;
            } else {
              item.statusText = "已结束";
              showModal({
                t2: "活动已结束",
                btn1show: false,
              }).then(() => {
                back();
              });
            }
          }
          if (item.publicityType == "fullSubFullDiscount") {
            item.publicityConfig = item.publicityConfig
              ? JSON.parse(item.publicityConfig)
              : {};

            let now = Date.now();
            let beginTime = new Date(
              item.beginTime.replace(/-/g, "/")
            ).getTime();
            let endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();

            if (now < beginTime) {
              item.statusText = "即将开始";
              this.downTime = beginTime - now;
            } else if (endTime - now > 0) {
              item.statusText = "进行中";
              this.downTime = endTime - now;
            } else {
              item.statusText = "已结束";
              this.downTime = 0;
              // showModal({
              // 	t2: '活动已结束',
              // 	btn1show: false,
              // }).then(() => {
              // 	back();
              // })
            }
          }
          if (item.publicityType == "nMoneyNPiece") {
            item.publicityConfig = item.publicityConfig
              ? JSON.parse(item.publicityConfig)
              : {};

            let now = Date.now();
            let beginTime = new Date(
              item.beginTime.replace(/-/g, "/")
            ).getTime();
            let endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();

            if (now < beginTime) {
              item.statusText = "即将开始";
              this.downTime = beginTime - now;
            } else if (endTime - now > 0) {
              item.statusText = "进行中";
              this.downTime = endTime - now;
            } else {
              item.statusText = "已结束";
              this.downTime = 0;
              // showModal({
              // 	t2: '活动已结束',
              // 	btn1show: false,
              // }).then(() => {
              // 	back();
              // })
            }
          }

          publicityType.push(item.publicityType);
          publicityGoodsList.push(item);
        }

        console.log(publicityType);
        let isZhi = 0;
        if (publicityType.includes("limitTimeSecKill")) {
          info.publicityType = "limitTimeSecKill";
          publicityGoodsList.map((item) => {
            if (item.publicityType == "limitTimeSecKill") {
              info.publicityInfo = item;
            }
          });
          isZhi = 1;
        }
        if (publicityType.includes("limitTimeDiscount") && isZhi == 0) {
          info.publicityType = "limitTimeDiscount";
          publicityGoodsList.map((item) => {
            if (item.publicityType == "limitTimeDiscount") {
              info.publicityInfo = item;
            }
          });
          isZhi = 1;
        }
        if (publicityType.includes("fullSubFullDiscount") && isZhi == 0) {
          info.publicityType = "fullSubFullDiscount";
          publicityGoodsList.map((item) => {
            if (item.publicityType == "fullSubFullDiscount") {
              info.publicityInfo = item;
            }
          });
          isZhi = 1;
        }
        if (publicityType.includes("nMoneyNPiece") && isZhi == 0) {
          info.publicityType = "nMoneyNPiece";
          publicityGoodsList.map((item) => {
            if (item.publicityType == "nMoneyNPiece") {
              info.publicityInfo = item;
            }
          });
          isZhi = 1;
        }
      }

      console.log("publicityInfo");
      console.log(info.publicityInfo);

      if (info.goodsSkuList.length !== 0) {
        /**多规格**/
        info.goodsSpecKeyList.map((item) => {
          item.goodsSpecList.map((items) => {
            items.check = false;
          });
          item.goodsSpecList[0].check = true;
        });
        if (info.publicityType == "limitTimeSecKill") {
          info.skuInfo = info.publicityInfo.config.detailList[0];
        } else if (info.publicityType == "limitTimeDiscount") {
          info.skuInfo = info.publicityInfo.config.detailList[0];
        } else {
          info.skuInfo = info.goodsSkuList[0];
        }
      } else {
        /**单规格**/
        if (info.publicityType == "limitTimeSecKill") {
          info.skuInfo = info.publicityInfo.config.detailList[0];
        } else if (info.publicityType == "limitTimeDiscount") {
          info.skuInfo = info.publicityInfo.config.detailList[0];
        } else {
          info.skuInfo = info.goodsSkuList[0];
        }
      }
      console.log(info);
    },
    async sellerInfo() {
      let { data } = await sellerInfo({
        id: this.info.sellerId,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;

        this.seller = info;
      } else {
        back();
      }
    },
    /**
     *
     * 收藏/取消收藏
     *
     * **/
    async favoriteSave() {
      loading();
      if (this.info.favoriteId > 0) {
        let { data } = await favoriteRemove({
          ids: this.info.favoriteId,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          this.info.favoriteId = 0;
          setStorage("collectionRef", 1);
        }
      } else {
        let { data } = await favoriteSave({
          id: this.options.id,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          this.info.favoriteId = data.data;
          setStorage("collectionRef", 1);
        }
      }
      uni.hideLoading();
    },

    /**
     * 点击切换规格
     */
    tabskuChange(index, indexs) {
      this.info.goodsSpecKeyList[index].goodsSpecList.map((item) => {
        item.check = false;
      });
      this.info.goodsSpecKeyList[index].goodsSpecList[indexs].check = true;
      this.skuPriceTotal();
    },

    /**
     * 切换sku价格
     */
    skuPriceTotal() {
      let title = this.getSkuTitle();
      if (this.info.publicityType == "limitTimeSecKill") {
        this.info.publicityInfo.config.detailList.map((item, index) => {
          if (title == item.spec) {
            this.info.skuInfo = item;
          }
        });
      } else if (this.info.publicityType == "limitTimeDiscount") {
        this.info.publicityInfo.config.detailList.map((item, index) => {
          if (title == item.spec) {
            this.info.skuInfo = item;
          }
        });
      } else {
        this.info.goodsSkuList.map((item, index) => {
          if (title == item.spec) {
            this.info.skuInfo = item;
          }
        });
      }
    },

    /**
     * 获取选中的规格
     */
    getSkuTitle(data) {
      let arr = [];
      this.info.goodsSpecKeyList.map((item) => {
        let arr1 = [];
        arr1.push(item.specKey);
        item.goodsSpecList.map((items) => {
          if (items.check) {
            arr1.push(items.specValue);
          }
        });
        arr.push(arr1);
      });
      let str = "";
      arr.map((item, index) => {
        str +=
          '"' +
          item[0] +
          '":"' +
          item[1] +
          '"' +
          (index == arr.length - 1 ? "" : ",");
      });
      return "{" + str + "}";
    },

    async confirmChange() {
      let skuid = "";
      console.log(this.info.skuInfo);
      let skuInfo = {};
      this.info.goodsSkuList.map((item) => {
        if (this.info.skuInfo.spec == item.spec) {
          skuid = item.id;
          skuInfo = item;
        }
      });
      if (skuInfo.stock < this.goodsNum) {
        this.skuShow = false;
        return msg("库存不足");
      }
      if (this.buyType == "addCar") {
        loading();
        this.skuShow = false;
        let { data } = await cartSave({
          goodsId: this.options.id,
          goodsNum: this.goodsNum,
          goodsSkuId: skuid,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          msg(data.msg);
          setStorage("carRef", 1);
        }
        uni.hideLoading();
      }
      if (this.buyType == "buy") {
        this.skuShow = false;
        // #ifdef MP-WEIXIN
        if (!getGloBalData("is_authorization")) {
          return go(`/pages/reg/reg`);
        }
        // #endif
        // #ifdef H5
        if (getEnv() == "WX_PUBLIC") {
          if (!getStorage("is_authorization")) {
            return go(`/pages/reg/reg`);
          }
        }
        // #endif
        go(
          `/pages/goods/confirm?num=${this.goodsNum}&id=${this.options.id}&skuid=${skuid}`
        );
      }
    },

    /**
     * 增加商品数量
     */
    minus() {
      if (this.goodsNum > 1) {
        this.goodsNum = this.goodsNum - 1;
      }
    },

    /**
     * 增加商品数量
     */
    plus() {
      this.goodsNum = this.goodsNum + 1;
    },

    inputBlur(e) {
      if (Number(e.detail.value) <= 0) {
        this.goodsNum = 1;
        return msg("最少购买1件");
      }
      this.goodsNum = Number(e.detail.value);
    },

    payChange(type) {
      this.buyType = type;
      this.skuShow = true;
    },

    bannerChange(e) {
      if (e.detail.source == "touch") {
        this.current = e.detail.current;
      }
    },
    goDetail(item) {
      uni.redirectTo({
        url: `/pages/goods/detail?id=${item.id}`,
      });
    },
    gourl(url) {
      go(url);
    },
    goswitchTab(url) {
      uni.switchTab({
        url,
      });
    },
    downonChange(e) {
      let hours = e.hours + e.days * 24;
      e.hours = hours;
      this.timeData = e;
    },
    downfinish() {
      this.goodsInfo();
    },
    goActivities(item) {
      if (item.publicityType == "limitTimeSecKill") {
        go(`/pages/activities/spike?id=${item.publicityId}`);
      } else if (item.publicityType == "limitTimeDiscount") {
        go(`/pages/activities/discount?id=${item.publicityId}`);
      } else {
        go(`/pages/activities/nynj?id=${item.publicityId}`);
      }
    },
    handleKefu() {
      let serveMobile = this.seller.extVO.serveMobile;
      let serveUrl = this.seller.extVO.serveUrl;
      if (this.seller.extVO.serveType == "1") {
        uni.makePhoneCall({
          phoneNumber: String(serveMobile),
        });
      } else {
        // #ifdef H5
        window.location.href = serveUrl;
        // #endif
        // #ifdef MP-WEIXIN
        setStorage("webview", serveUrl);
        go(`/pages/webview/webview`);
        // #endif
      }
    },

    /***海报***/
    qrCodeShowChange() {
      if (this.poster) {
        this.qrCodeShow = true;
      } else {
        loading();
        this.downloadFileQrCode().then(() => {
          this.downloadFileBgImg();
        });
        // this.qrCodeTimer = setTimeout(() => {
        //   console.log(this.poster);
        //   if (this.poster) {
        //     this.qrCodeShow = true;
        //     clearInterval(this.qrCodeTimer);
        //   }
        // }, 500);
      }
    },
    async downloadFileQrCode() {
      return new Promise((reslove, reject) => {
        let scene = md5(this.options.id + "," + this.user.id);
        codeSetScene({
          key: scene,
          scene: this.options.id + "," + this.user.id,
        });
        uni.downloadFile({
          url: `${baseUrl}/server-auth/wechat/share/code?scene=${scene}&url=pages/goods/detail`,
          header: {
            token: getToken(),
            "User-Type": "wap",
            Authorization: "d2FwOlpNOUtuNU50SA==",
          },
          success: async (res) => {
            reslove();
            this.qrcode = res.tempFilePath;
          },
          fail: (err) => {
            reject();
          },
        });
      });
    },
    async downloadFileBgImg() {
      uni.downloadFile({
        url: this.info.img,
        header: {
          "Access-Control-Expose-Headers": "Content-Disposition",
        },
        success: async (res) => {
          let tempFilePath = res.tempFilePath;
          uni.getImageInfo({
            src: tempFilePath,
            success: async (res) => {
              let imgHeight = res.height * (this.width / res.width);
              this.imgHeight = imgHeight;
              this.canvasHeight = imgHeight + 130;
              this.localImg = res.path;
              setTimeout(() => {
                console.log("执行绘画");
                this.canvasPainting();
              }, 1000);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    async canvasPainting() {
      if (this.poster) return uni.hideLoading();
      loading();
      let context = uni.createCanvasContext("canvas");
      context.setFillStyle("#fff");
      context.fillRect(0, 0, this.width, this.canvasHeight);
      context.drawImage(this.localImg, 0, 0, this.width, this.imgHeight);

      context.drawImage(
        this.qrcode,
        this.width - 90 - 15,
        this.imgHeight + 30,
        90,
        90
      );

      context.setFillStyle("#1F1F1F"); //字体颜色
      context.font = "normal bold 20px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(
        `${
          this.info.name.length > 14
            ? this.info.name.substring(0, 14) + "..."
            : this.info.name
        }`,
        15,
        this.imgHeight + 35
      );

      context.setFillStyle(`${this.colorStatus}`); //字体颜色
      context.font = "normal bold 16px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(`￥`, 15, this.imgHeight + 80);
      context.setFillStyle(`${this.colorStatus}`); //字体颜色
      context.font = "normal bold 24px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(`${this.info.goodsPrice}`, 32, this.imgHeight + 80);
      context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
      context.stroke();
      context.setStrokeStyle("#fff");
      context.draw();

      let that = this;
      setTimeout(() => {
        console.log("结束绘画");
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: that.width,
          height: that.canvasHeight,
          canvasId: "canvas",
          success(res) {
            console.log(res);
            let poster = res.tempFilePath;
            that.poster = poster;
            that.qrCodeShow = true;
            uni.hideLoading();
          },
          fail(err) {
            console.log(!this.poster);
            console.log(err);
            uni.hideLoading();
          },
          complete(err) {
            console.log(err);
          },
        });
      }, 500);
    },
    saveImg() {
      // this.canvasPainting()
      // #ifdef H5
      msg("请长按图片保存");
      // #endif
      // #ifdef MP-WEIXIN
      loading();
      uni.saveImageToPhotosAlbum({
        filePath: this.poster,
        success(res) {
          msg("保存成功");
        },
        fail(err) {
          uni.hideLoading();
          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
            uni.showModal({
              title: "提示",
              content: "请点击打开权限",
              success(res) {
                if (res.confirm) {
                  uni.openSetting();
                }
              },
            });
          }
        },
      });
      // #endif
    },
  },
  beforeDestroy() {
    // 清除定时器
    if (this.qrCodeTimer) {
      clearInterval(this.qrCodeTimer);
    }
  },
  onPullDownRefresh() {
    this.goodsInfo();
  },
  onShareAppMessage: function (e) {
    return {
      title: `${this.info.name}`,
      path: `/pages/goods/detail?uid=${getGloBalData("userinfo").id}&id=${
        this.options.id ? this.options.id : ""
      }`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  position: relative;

  swiper {
    height: 750rpx;
    width: 100%;

    image {
      width: 100%;
      height: 750rpx;
    }
  }

  .indicator-dots {
    z-index: 1;
    position: absolute;
    bottom: 40rpx;
    width: 100%;

    .dots {
      background: #505050;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      margin: 0 6rpx;
    }

    .active {
      background: #fff;
    }
  }
}

.infobox2 {
  height: 160rpx;
  position: relative;
  // top: -40rpx;

  .bg {
    height: 160rpx;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }

  .infobox2main {
    height: 160rpx;
    position: relative;
    padding: 0 30rpx;
  }

  .block1 {
    position: relative;

    .info1 {
      .tip1 {
        position: relative;
        top: 6rpx;
      }

      .tip2 {
      }

      .tipbox2 {
        text-decoration: line-through;
        color: #f5f5f5;
      }
    }

    .info2 {
      margin-left: 20rpx;
      border-radius: 37rpx;
      background: rgba(0, 0, 0, 0.6);
      padding: 4rpx 24rpx;
      text-decoration: line-through;

      .tip1 {
        position: relative;
        top: 2rpx;
      }
    }

    .info3 {
      margin-left: 20rpx;
      border-radius: 37rpx;
      background: #fff;
      padding: 4rpx 24rpx;
      height: 54rpx;
      line-height: 54rpx;

      .tip1 {
        position: relative;
        top: 2rpx;
      }
    }
  }

  .block2 {
    position: relative;
    text-align: center;

    .info1 {
    }

    .info2 {
      margin: 8rpx 0 0;

      .tip1 {
        color: #f65b49;
        background: #fff;
        border-radius: 8rpx;
        background: #fff;
        padding: 2rpx 6rpx;
        font-weight: bold;
      }

      .tip2 {
        font-weight: bold;
        margin: 0 8rpx;
        color: #fff;
      }
    }
  }
}

.infobox3 {
  background: #fff;
  // border-radius: 28rpx 28rpx 0 0;
  position: relative;
  // top: -80rpx;
  // height: 500rpx;
  padding: 34rpx 30rpx 0;

  .block1 {
    .left {
      width: calc(100% - 152rpx);
      white-space: nowrap;
      overflow-y: scroll;
      .label {
        display: inline-block;
        border: 1px solid var(--view-theme);
        color: var(--view-theme);
        padding: 8rpx 14rpx;
        border-radius: 8rpx;
        margin: 0 20rpx 0 0;
      }
    }

    .right {
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .block2 {
    margin: 24rpx 0 0;

    .info1 {
      width: calc(100% - 100rpx - 56rpx);
    }

    .info2 {
      image {
        width: 48rpx;
        height: 48rpx;
        margin: 0 0 0 28rpx;
      }
    }
  }

  .block3 {
    margin: 24rpx 0 0;
    padding: 0 0 40rpx 0;
  }

  .block4 {
    margin: 0 0 10rpx 0;

    .info1 {
      .tip1 {
        position: relative;
        top: 6rpx;
      }

      .tip2 {
      }
    }

    .info2 {
      image {
        width: 48rpx;
        height: 48rpx;
        margin: 0 0 0 28rpx;
      }
    }
  }
}

.infobox4 {
  background: #fff;
  border-radius: 28rpx 28rpx 0 0;
  position: relative;
  // top: -80rpx;
  padding: 20rpx 30rpx 20rpx;
  margin: 12rpx 0 0;

  .block1 {
    padding: 20rpx 0;

    .info1 {
      width: 80rpx;
    }

    .info2 {
      .tipbox1 {
        margin: 0 38rpx 0 0;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        .tip1 {
          margin-left: 12rpx;
        }
      }
    }
  }

  .block2 {
    padding: 20rpx 0;

    .left {
      .info1 {
        width: 80rpx;
      }

      .info2 {
      }
    }

    .right {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.infobox5 {
  background: #fff;
  border-radius: 28rpx 28rpx 0 0;
  position: relative;
  // top: -80rpx;
  padding: 0 30rpx;
  margin: 12rpx 0 0;

  .block1 {
    padding: 40rpx 0;

    .info2 {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }
    }
  }
}

.infobox6 {
  background: #fff;
  border-radius: 28rpx 28rpx 0 0;
  position: relative;
  // top: -80rpx;
  padding: 40rpx 30rpx;
  margin: 12rpx 0 0;

  .block1 {
    .left {
      image {
        width: 82rpx;
        height: 82rpx;
        border-radius: 14rpx;
      }

      .info1 {
        margin-left: 18rpx;
        width: calc(100% - 18rpx - 82rpx);

        .tip1 {
        }

        .tip2 {
          margin: 10rpx 0 0;

          image {
            width: 24rpx;
            height: 24rpx;
            margin: 0 8rpx 0 0;
          }
        }
      }
    }

    .right {
      border-radius: 36rpx;
      background: var(--view-theme);
      padding: 12rpx 38rpx;
    }
  }

  .block2 {
    margin: 24rpx 0 0;
    border-radius: 28rpx;
    overflow: hidden;

    image {
      width: 166rpx;
      height: 166rpx;
      margin: 0 20rpx 0 0;
      border-radius: 28rpx;
    }
  }
}

.infobox7 {
  background: #fff;
  border-radius: 28rpx 28rpx 0 0;
  position: relative;
  // top: -80rpx;
  padding: 40rpx 30rpx;
  margin: 12rpx 0 0;

  .block1 {
  }

  .block2 {
    margin: 32rpx 0 0;
  }
}

.popbox1 {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .block1 {
    padding: 36rpx 0;
    text-align: center;
  }

  .block3 {
    padding: 30rpx 30rpx 0;

    .info2 {
      margin: 20rpx 0 0;
    }
  }

  .btn {
    background: var(--view-theme);
    border-radius: 44rpx;
    margin: 100rpx 75rpx 0;
    padding: 24rpx 0;
    text-align: center;
  }
}

.skuPopbox1 {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .skuinfobox1 {
    padding: 36rpx 28rpx;

    .img {
      width: 144rpx;
      height: 144rpx;
      border-radius: 22rpx;
    }

    .block1 {
      width: calc(100% - 144rpx - 22rpx - 60rpx);
      height: 144rpx;
      margin-left: 22rpx;

      .info1 {
      }

      .info2 {
        .tip1 {
          position: relative;
          top: 4rpx;
        }

        .tip2 {
        }
      }
      .info3 {
        font-size: 22rpx;
      }
    }
  }

  .skuinfobox2 {
    margin: 30rpx 30rpx 0;

    .block1 {
    }

    .block2 {
      margin: 24rpx 0 0;

      .info1 {
        background: var(--view-minorColorT);
        padding: 16rpx 32rpx;
        border-radius: 40rpx;
        border: 1px solid var(--view-theme);
        margin: 0 24rpx 24rpx 0;
      }

      .info2 {
        background: var(--view-theme);
        color: #fff !important;
      }
    }
  }

  .skuinfobox3 {
    margin: 12rpx 30rpx 0;

    .block1 {
    }

    .block2 {
      margin: 24rpx 0 0;

      .info1 {
      }

      input {
        width: 80rpx;
        text-align: center;
      }

      .info1 {
      }
    }
  }

  .btn {
    background: var(--view-theme);
    border-radius: 44rpx;
    margin: 100rpx 30rpx 0;
    padding: 24rpx 0;
    text-align: center;
  }
}

.infobox8 {
  position: fixed;
  width: calc(100% - 60rpx);
  background: #fff;
  padding: 40rpx 30rpx 50rpx;
  bottom: 0;
  z-index: 99;
  border-top: 1px solid #f5f5f5;

  .block1 {
    .info1 {
      width: 80rpx;
      text-align: center;

      image {
        width: 48rpx;
        height: 48rpx;
        margin: 0 auto 10rpx;
      }
    }
  }

  .block2 {
    width: calc(100% - (48rpx * 3));

    .info1 {
      border-radius: 63rpx;
      background: var(--view-minorColorT);
      color: var(--view-theme);
      padding: 20rpx 0;
      width: 198rpx;
      text-align: center;
    }

    .info2 {
      border-radius: 63rpx;
      background: var(--view-theme);
      color: #fff;
      padding: 20rpx 0;
      width: 198rpx;
      text-align: center;
    }
  }
}

.poster {
  border-radius: 28rpx;
  margin: auto;
  width: 640rpx;
  position: relative;
  z-index: 99;
}
.closeIcon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  z-index: 99;
  top: -20rpx;
  right: 30rpx;
}
.canvasBox {
  width: 100%;
  background: #fff;
  position: absolute;
  top: -11111111px;
}
.qrCodeinfobox3 {
  .block1 {
    margin: 10rpx auto 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
    width: 600rpx;
  }

  .block2 {
    margin: 30rpx 0 0;

    .info1 {
      width: 32rpx;
    }

    .info2 {
      margin-left: 10rpx;

      .tip1 {
        color: #999;
        font-size: 24rpx;
      }

      .tip2 {
        font-size: 24rpx;
        color: #f65b49;
      }
    }
  }
}
</style>
